<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form</title>
<script type="text/javascript" src="../jquery-cores/jquery-1[1].3.min.js"></script>
<style>
body{
	font-size:12px;
	font-family:Tahoma, Geneva, sans-serif;
}
label{
	width:100px;
	display:inline;
	padding-top:3px;
}
.required{
	margin:3px 2px;
	border:1px solid #09F;
}
.conditional{
	margin:5px 3px;
	border:1px solid #9C0;
}
.req-label{
	font-weight:bold;
}
</style>
</head>

<body>
<fieldset>
	<legend>Personal Info</legend>
    <ol>
    	<li><label for="first-name">first Name</label><input type="text" name="first-name" id="first-name" class="required" /><span>(required)</span></li>
        <li><label for="last-name">Last Name</label><input type="text" name="last-name" id="last-name" class="required" /><span>(required)</span></li>
        <li>How would you like to be contacted?(choose at least one mothod)</li>
        <ul>
        	<li><label for="by-email"><input type="checkbox" name="by-contact-type" value="Email" id="by-email" />by E-Mail</label><input type="text" name="email" id="email" class="conditional" /> <span>(required when corrseponding checkbox checked)</span></li>
           <li><label for="by-phone"><input type="checkbox" name="by-contact-type" value="Phone" id="by-phone" />by Phone</label><input type="text" name="phone" id="phone" class="conditional" /> <span>(required when corrseponding checkbox checked)</span></li>
           <li><label for="by-fax"><input type="checkbox" name="by-contact-type" value="Fax" id="by-fax" /> by Fax</label><input type="text" name="fax" id="fax" class="conditional" /> <span>(required when corrseponding checkbox checked)</span></li>
        </ul>
    </ol>
</fieldset>
<script>
$(document).ready(function(){
	$("fieldset").each(function(){
		var heading = $("legend",this).remove().text();
		$("<h3></h3>")
		.text(heading)
		.prependTo(this)
		.css({backgroundColor:"#318ee6",padding:"3px 5px",borderTop:"1px solid #980535"});
	});
	
	var requiredFlag = " * ";
	var conditionalFlag = " ** ";
	$("input").filter(".required")
	.next("span").text(requiredFlag).css({color:"#e9263d"}).end()
	.prev("label").addClass("req-label");
	$("input").filter(".conditional")
	.next("span").text(conditionalFlag);

});
</script>
</body>
</html>
